<template>
  <div class="menu" style="background: #fff; width: 100%; height: 50px; display: flex">
    <!-- 排行榜菜单栏 -->
    <div :class="{ active: activeMenu === 1 }" @click="chooseMenu(1)">总榜</div>
    <div :class="{ active: activeMenu === 2 }" @click="chooseMenu(2)">周榜</div>
  </div>
  <div class="data">
    <div class="infinite-list-wrapper" style="overflow: auto">
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
        v-if="activeMenu === 1 ? true : false"
      >
        <li v-for="(item, index) in rank" :key="item.id" class="list-item" @click="toUser(item.id)">
          <div style="display: flex">
            <div style="line-height: 60px">{{ index + 1 }}</div>
            <div style="width: 80px">
              <el-avatar shape="square" :src="item.avatar" style="margin-top: 10px" />
            </div>
            <div class="username">
              {{ item.nickname }}
            </div>
            <div class="tag">点赞量&nbsp;{{ item.likeCount === null ? 0 : item.likeCount }}</div>
            <div class="tag">
              关注量&nbsp;{{ item.followCount === null ? 0 : item.followCount }}
            </div>
            <div class="desc">
              个人描述&nbsp;{{ item.description === null ? '无' : item.description }}
            </div>
            <div class="desc">个人邮箱&nbsp;{{ item.emil === null ? '无' : item.emil }}</div>
          </div>
          <div style="line-height: 60px; font-size: 12px; color: #787878">
            {{ item.score }}&nbsp;综合指标数
          </div>
        </li>
      </ul>
      <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled" v-else>
        <li
          v-for="(item, index) in weekRank"
          :key="item?.id"
          class="list-item"
          @click="toUser(item.id)"
        >
          <div style="display: flex">
            <div style="line-height: 60px">{{ index + 1 }}</div>
            <div style="width: 80px">
              <el-avatar shape="square" :src="item.avatar" style="margin-top: 10px" />
            </div>
            <div class="username">
              {{ item.nickname }}
            </div>
            <div class="tag">点赞量&nbsp;{{ item.likeCount === null ? 0 : item.likeCount }}</div>
            <div class="tag">
              关注量&nbsp;{{ item.followCount === null ? 0 : item.followCount }}
            </div>
            <div class="desc">
              个人描述&nbsp;{{ item.description === null ? '无' : item.description }}
            </div>
            <div class="desc">个人邮箱&nbsp;{{ item.emil === null ? '无' : item.emil }}</div>
          </div>
          <div style="line-height: 60px; font-size: 12px; color: #787878">
            {{ item.score }}&nbsp;综合指标数
          </div>
        </li>
      </ul>
      <div v-if="loading">
        <div class="loader"></div>
      </div>
      <p v-if="noMore">No more</p>
    </div>
  </div>
  <div class="mine">
    <!-- {{ user }} -->
    <!-- {{ userRank }} -->
    <div style="display: flex; margin-left: 20px; width: 80%">
      <div style="width: 80px">
        <el-avatar shape="square" :src="user.avatar" style="margin-top: 10px" />
      </div>
      <div class="username">
        {{ user.nickname }}
      </div>
      <div class="tag">点赞量&nbsp;{{ user.likeCount === null ? 0 : user.likeCount }}</div>
      <div class="tag">关注量&nbsp;{{ user.followCount === null ? 0 : user.followCount }}</div>
      <div class="desc">
        个人描述&nbsp;{{ user.description === null ? '无' : user.description }}
      </div>
      <div class="desc">个人邮箱&nbsp;{{ user.emil === null ? '无' : user.emil }}</div>
    </div>
    <div style="line-height: 60px; font-size: 12px; color: #ff4d00; display: flex; flex: 1">
      <div style="width: 100px">
        周排名&nbsp;<span style="font-size: 14px">{{ userRank.weekRank }}</span>
      </div>
      <div>
        总排名&nbsp;<span style="font-size: 14px">{{ userRank.rank }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/util/request'
import { ref, computed, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'

const startRank = ref(0)
const startWeekRank = ref(0)
const endRank = ref(20)

const router = useRouter()

const userRank = ref({})

const rank = ref([])
const weekRank = ref([])
const activeMenu = ref(1)
const user = ref({})

const rankCount = ref(10)
const weekRankCount = ref(10)
const loading = ref(false)
const noMore = computed(() => rank.value.length >= rankCount.value)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  debugger
  getRank()
  getWeekRank()
}

const getRank = () => {
  request
    .get(`/rank/ranks?start=${startRank.value}&end=${endRank.value}`)
    .then((res) => {
      console.log('获取排行榜数据成功：', res.data)
      rankCount.value = res.data.count
      rank.value = [...rank.value, ...res.data.ranking]
      startRank.value += endRank.value
      // 去重
      rank.value = rank.value.filter((item, index, array) => {
        return array.findIndex((t) => t['id'] === item['id']) === index
      })
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getWeekRank = () => {
  request
    .get(`/rank/week-ranks?start=${startWeekRank.value}&end=${endRank.value}`)
    .then((res) => {
      console.log('获取排行榜数据成功：', res.data)
      weekRankCount.value = res.data.count
      weekRank.value = [...weekRank.value, ...res.data.weekRanking]
      startWeekRank.value += endRank.value
      // 去重
      weekRank.value = weekRank.value.filter((item, index, array) => {
        return array.findIndex((t) => t['id'] === item['id']) === index
      })
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getUserRank = (id) => {
  request
    .get(`/rank/one?userId=${id}`)
    .then((res) => {
      userRank.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const toUser = (id) => {
  router.push({ name: 'UserPage', params: { userId: id } })
}

const chooseMenu = (menu) => {
  activeMenu.value = menu
}

onMounted(() => {
  user.value = JSON.parse(localStorage.getItem('user'))
  getUserRank(user.value.id)
})
</script>

<style lang="scss" scoped>
.menu {
  & > div {
    width: 100px;
    text-align: center;
    line-height: 50px;
    &:hover {
      background: #eee;
      cursor: pointer;
      color: #0059f3;
    }
  }
}
.data {
  width: 90%;
  margin: 20px 5% 60px 5%;
  background: #fff;
  height: calc(100vh - 200px);
  overflow: auto;
}

.mine {
  width: 100vw;
  height: 60px;
  position: fixed;
  bottom: 0;
  padding: 0 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}

.active {
  color: #0059f3;
  border-bottom: 2px #0059f3 solid;
}
.desc {
  line-height: 60px;
  color: #111;
  width: 250px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 12px;
  color: #393838;
}

.username {
  line-height: 60px;
  color: #111;
  width: 120px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.tag {
  line-height: 60px;
  width: 100px;
  font-size: 12px;
  color: #393838;
}

.loader {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  transform: rotate(165deg);
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.25em;
  transform: translate(-50%, -50%);
}

.loader:before {
  animation: before8 2s infinite;
}

.loader:after {
  animation: after6 2s infinite;
}

@keyframes before8 {
  0% {
    width: 0.5em;
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }

  35% {
    width: 2.5em;
    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
  }

  70% {
    width: 0.5em;
    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
  }

  100% {
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
}

@keyframes after6 {
  0% {
    height: 0.5em;
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }

  35% {
    height: 2.5em;
    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
  }

  70% {
    height: 0.5em;
    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
  }

  100% {
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }
}

.loader {
  position: absolute;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
}
// 懒加载数据样式
.infinite-list-wrapper {
  height: 400px;
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  height: 60px;
  justify-content: space-between;
  padding: 0 20px;
  &:hover {
    background: #f2f6ff;
    cursor: pointer;
  }
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}
</style>
